<template>
  <layout>
    <div class="inspection-form">
      <div class="top-bar">
        <div class="btn btn-back" @click="$router.back()">返回</div>
        <div class="right-btn-group">
          <div class="btn btn-save">保存</div>
          <div class="btn btn-submit">提交</div>
        </div>
      </div>
      <div class="content">
        <div class="title">2021年驻外使领馆远程综合测评</div>
        <div class="notice-row" @click="showNotice">
          <div class="notice">
            <van-icon name="warning" />
            <div class="text">注意事项</div>
            <van-icon name="play" />
          </div>
          <div class="count-down">
            <span>剩余时间</span>
            <div class="time">{{minutesLeft | fillZero}}</div>
            <span>:</span>
            <div class="time">{{secondsLeft | fillZero}}</div>
          </div>
        </div>
        <div class="selector-row">
          <div class="label">当前是:</div>
          <select>
            <option value="1">对馆长书记张三的测评</option>
          </select>
        </div>
        <div v-for="(group,i) of list" :key="i">
          <div class="paragraph">
            <div class="title">
              <span>{{C_NUMBER[i]}}、{{group.title}}</span>
              <span>(共{{group.questions.length}}题、共{{group.totalScore}}分)</span>
            </div>
            <div class="other-info" @click="showGroup(group)">
              <span>{{getFinishedCount(group)}}/{{group.questions.length}}</span>
              <van-icon name="arrow-down" />
            </div>
          </div>
          <div class="question-wrapper"
            v-for="(item,j) of group.questions"
            :key="j"
          >
            <template v-if="[1,2].includes(group.type)">
              <div class="question">
                {{j+1}}、{{item.questionText}}
                <span v-if="item.answers.length">(已选择{{item.answers.map(o=>o.value).join(',')}})</span>
              </div>
              <div class="answer-option-wrapper">
                <div
                  v-for="(option, i) of item.answerOptions"
                  :class="['answer', {
                    selected: option.selected
                  }]"
                  :key="i"
                  @click="choose(group, item, option)"
                >{{option.value}}.{{option.text}}</div>
                <textarea class="textarea" v-if="group.type!==3"></textarea>
              </div>
            </template>
            <template v-else>
              <div class="question">
                {{j+1}}、
                <template v-for="(content, k) of item.gp">
                  <template v-if="content.type==='text'">{{content.content}}</template>
                  <input type="text"
                    class="fill-blank"
                    v-if="content.type==='input'"
                    v-model="item.answers[content.index]"
                    :key="k"
                  >
                </template>
              </div>
            </template>
          </div>
        </div>
      </div>
      <van-popup v-model="isNoticePopupShow" round closeable class="notice-popup">
        <div class="notice-content-wrapper">
          <div class="title">注意事项</div>
          <div class="content">
            <div>1、各项满分均为100分，请逐项打分，系统将自动汇总总成绩。</div>
            <div>2、评分标准:100~90分-很好，89~80分-良好，79~60分-一般，59分以下-差。</div>
            <div>3、低分点数:60，若分数低于60，需要填写潜在说明问题，其他情况无需填写潜在问题</div>
            <div>4、平均分点:100分，如您需要同时对多人进行评估，请注意你得评价受“平均分点”限制，系统将按人均分向您分配总分点</div>
          </div>
        </div>
      </van-popup>
      <van-popup v-model="isGroupPopupShow" round closeable class="group-popup">
        <div class="group-content-wrapper" v-if="currGroup">
          <div
            v-for="(question, i) of currGroup.questions"
            :class="{finished: checkFinished(question, currGroup.type)}"
            @click="scrollToQuestion()"
            :key="i"
          >{{i+1}}</div>
        </div>
      </van-popup>
    </div>
  </layout>
</template>

<script>
const data = [{
  title: '单选题',
  totalScore: 20,
  type: 1,
  questions: [{
    id: 1,
    questionText: '政治素养（包括深入学习贯彻习近平新时代中国待色社会主义思想、理想信念坚定）对党忠诚。【评分多选】',
    answerOptions: [{
      id: 1,
      value: 'A',
      text: '坚定信念，勇往直前',
      selected: false
    }, {
      id: 2,
      value: 'B',
      text: '斗争精神、斗争本领',
      selected: false
    }, {
      id: 3,
      value: 'C',
      text: '选项三',
      selected: false
    }, {
      id: 4,
      value: 'D',
      text: '选项四',
      selected: false
    }],
    answers: [],
    extendAnswer: ''
  }, {
    id: 2,
    questionText: '政治素养（包括深入学习贯彻习近平新时代中国待色社会主义思想、理想信念坚定）对党忠诚。【评分多选】',
    answerOptions: [{
      id: 1,
      value: 'A',
      text: '坚定信念，勇往直前',
      selected: false
    }, {
      id: 2,
      value: 'B',
      text: '斗争精神、斗争本领',
      selected: false
    }, {
      id: 3,
      value: 'C',
      text: '选项三',
      selected: false
    }, {
      id: 4,
      value: 'D',
      text: '选项四',
      selected: false
    }],
    answers: [],
    extendAnswer: ''
  }, {
    id: 3,
    questionText: '政治素养（包括深入学习贯彻习近平新时代中国待色社会主义思想、理想信念坚定）对党忠诚。【评分多选】',
    answerOptions: [{
      id: 1,
      value: 'A',
      text: '坚定信念，勇往直前',
      selected: false
    }, {
      id: 2,
      value: 'B',
      text: '斗争精神、斗争本领',
      selected: false
    }, {
      id: 3,
      value: 'C',
      text: '选项三',
      selected: false
    }, {
      id: 4,
      value: 'D',
      text: '选项四',
      selected: false
    }],
    answers: [],
    extendAnswer: ''
  }, {
    id: 4,
    questionText: '政治素养（包括深入学习贯彻习近平新时代中国待色社会主义思想、理想信念坚定）对党忠诚。【评分多选】',
    answerOptions: [{
      id: 1,
      value: 'A',
      text: '坚定信念，勇往直前',
      selected: false
    }, {
      id: 2,
      value: 'B',
      text: '斗争精神、斗争本领',
      selected: false
    }, {
      id: 3,
      value: 'C',
      text: '选项三',
      selected: false
    }, {
      id: 4,
      value: 'D',
      text: '选项四',
      selected: false
    }],
    answers: [],
    extendAnswer: ''
  }]
}, {
  title: '多选题',
  totalScore: 20,
  type: 2,
  questions: [{
    questionText: '政治素养（包括深入学习贯彻习近平新时代中国待色社会主义思想、理想信念坚定）对党忠诚。【评分多选】',
    answerOptions: [{
      id: 1,
      value: 'A',
      text: '坚定信念，勇往直前',
      selected: false
    }, {
      id: 2,
      value: 'B',
      text: '斗争精神、斗争本领',
      selected: false
    }, {
      id: 3,
      value: 'C',
      text: '选项三',
      selected: false
    }, {
      id: 4,
      value: 'D',
      text: '选项四',
      selected: false
    }],
    answers: [],
    extendAnswer: ''
  }, {
    questionText: '政治素养（包括深入学习贯彻习近平新时代中国待色社会主义思想、理想信念坚定）对党忠诚。【评分多选】',
    answerOptions: [{
      id: 1,
      value: 'A',
      text: '坚定信念，勇往直前',
      selected: false
    }, {
      id: 2,
      value: 'B',
      text: '斗争精神、斗争本领',
      selected: false
    }, {
      id: 3,
      value: 'C',
      text: '选项三',
      selected: false
    }, {
      id: 4,
      value: 'D',
      text: '选项四',
      selected: false
    }],
    answers: [],
    extendAnswer: ''
  }, {
    questionText: '政治素养（包括深入学习贯彻习近平新时代中国待色社会主义思想、理想信念坚定）对党忠诚。【评分多选】',
    answerOptions: [{
      id: 1,
      value: 'A',
      text: '坚定信念，勇往直前',
      selected: false
    }, {
      id: 2,
      value: 'B',
      text: '斗争精神、斗争本领',
      selected: false
    }, {
      id: 3,
      value: 'C',
      text: '选项三',
      selected: false
    }, {
      id: 4,
      value: 'D',
      text: '选项四',
      selected: false
    }],
    answers: [],
    extendAnswer: ''
  }]
}, {
  title: '填空题',
  totalScore: 20,
  type: 3,
  questions: [{
    questionText: '政治素养（包括{$}贯彻习近平新时代中国待色社会主义思想、理想{$}）对党忠诚。【多项填空】',
    answerOptions: [],
    answers: [],
    extendAnswer: ''
  }, {
    questionText: '政治素养（包括{$}贯彻习近平新时代中国待色社会主义思想、理想{$}）对党忠诚。【多项填空】',
    answerOptions: [],
    answers: [],
    extendAnswer: ''
  }, {
    questionText: '政治素养（包括{$}贯彻习近平新时代中国待色社会主义思想、理想{$}）对党忠诚。【多项填空】',
    answerOptions: [],
    answers: [],
    extendAnswer: ''
  }, {
    questionText: '政治素养（包括{$}贯彻习近平新时代中国待色社会主义思想、理想{$}）对党忠诚。【多项填空】',
    answerOptions: [],
    answers: [],
    extendAnswer: ''
  }, {
    questionText: '政治素养（包括{$}贯彻习近平新时代中国待色社会主义思想、理想{$}）对党忠诚。【多项填空】',
    answerOptions: [],
    answers: [],
    extendAnswer: ''
  }, {
    questionText: '政治素养（包括{$}贯彻习近平新时代中国待色社会主义思想、理想{$}）对党忠诚。【多项填空】',
    answerOptions: [],
    answers: [],
    extendAnswer: ''
  }]
}];
export default {
  data() {
    return {
      C_NUMBER: '一二三四五六七八九十',
      timesLeft: 60 * 60,
      isNoticePopupShow: false,
      list: [],
      currGroup: null,
      isGroupPopupShow: false
    };
  },
  filters: {
    fillZero(v) {
      return ('0' + v).slice(-2);
    }
  },
  computed: {
    minutesLeft() {
      return Math.floor(this.timesLeft / 60);
    },
    secondsLeft() {
      return this.timesLeft - this.minutesLeft * 60;
    }
  },
  methods: {
    choose({type}, item, option) {
      option.selected = !option.selected;
      if (type === 1) {
        item.answerOptions.forEach(o => {
          if (o.id !== option.id) {
            o.selected = false;
          }
        });
      }
      item.answers = item.answerOptions
        .filter(o => o.selected)
        .sort((a, b) => a.id - b.id);
    },
    showNotice() {
      this.isNoticePopupShow = true;
    },
    checkFinished(question, groupType) {
      if (groupType !== 3) {
        return question.answers.length > 0;
      } else {
        const inputCnt = question.gp.filter(o => o.type === 'input').length,
          answerCnt = question.answers.filter(o => !!o).length;
        return inputCnt === answerCnt;
      }
    },
    getFinishedCount(group) {
      return group.questions.filter(
        question => {
          // 单选和多选只要有选中项则认为答完了
          if (group.type !== 3) {
            return question.answers.length > 0;
          } else {
            const inputCnt = question.gp.filter(o => o.type === 'input').length,
              answerCnt = question.answers.filter(o => !!o).length;
            return inputCnt === answerCnt;
          }
        }
      ).length;
    },
    showGroup(group) {
      this.currGroup = group;
      this.isGroupPopupShow = true;
    },
    loadData() {
      data.filter(o => o.type === 3)
        .forEach(o => {
          o.questions.forEach(o => {
            let question = o.questionText;
            o.gp = [];
            let lastIndex = 0, i = 0;
            const matchs = question.matchAll(/{\$}/g);
            for (const match of matchs) {
              if (match.index > lastIndex) {
                const content = question.slice(lastIndex, match.index);
                o.gp.push({
                  type: 'text',
                  content
                });
              }
              const temp = match[0];
              o.gp.push({
                type: 'input',
                index: i++
              });
              lastIndex = match.index + temp.length;
            }
            if (lastIndex < question.length) {
              o.gp.push({
                type: 'text',
                content: question.slice(lastIndex)
              });
            }
            o.answers = o.gp.filter(p => p.type === 'input').map(p => '');
          });
        });
      this.list = data;
    }
  },
  mounted() {
    this.interval = setInterval(() => {
      this.timesLeft--;
    }, 1000);
    this.loadData();
  },
  destroyed() {
    clearInterval(this.interval);
  }
};
</script>

<style lang="less" scoped>
.inspection-form{
  display: flex;
  flex-direction: column;
  height: 100%;
  .top-bar{
    display: flex;
    padding: 28px 40px;
    height: 104px;
    box-sizing: border-box;
    .btn{
      height: 50px;
      line-height: 50px;
      background: #009AFD;
      color: #fff;
      font-size: 30px;
      text-align: center;
      padding: 0 20px;
      border-radius: 12px;
    }
    .right-btn-group{
      flex: 1;
      display: flex;
      justify-content: flex-end;
      .btn-submit{
        margin-left: 20px;
      }
    }
  }
  >.content{
    flex: 1;
    overflow-y: auto;
    font-size: 32px;
    padding: 0 40px 40px 40px;
    .title{
      font-size: 36px;
      font-weight: 600;
      text-align: center;
    }
    .notice-row{
      display: flex;
      .notice{
        flex: 1;
        display: flex;
        align-items: center;
        padding: 30px 0;
        color: #FE9B00;
        .text{
          margin: 0 10px;
        }
        .text+*{
          transform: rotate(90deg);
        }
      }
      .count-down{
        display: flex;
        padding: 30px 0;
        align-items: baseline;
        .time{
          width: 50px;
          height: 50px;
          background: #010203;
          border-radius: 8px;
          color: #fff;
          line-height: 52px;
          text-align: center;
          margin: 0 10px;
        }
      }
    }
    .selector-row{
      display: flex;
      select{
        flex: 1;
        margin-left: 10px;
        outline: none;
      }
    }
    .paragraph{
      display: flex;
      align-items: center;
      margin-top: 40px;
      .title{
        font-weight: 600;
        :last-child{
          font-size: 30px;
        }
      }
      .other-info{
        flex: 1;
        display: flex;
        font-size: 28px;
        justify-content: flex-end;
        align-items: center;
        color: #32A8FD;
        :last-child{
          margin-left: 10px;
        }
      }
    }
    .question-wrapper{
      margin-top: 20px;
      background: #fff;
      border-radius: 10px;
      padding: 20px;
      .question{
        line-height: 1.7;
        input{
          display: inline-block;
          max-width: 100px;
          border-bottom: 1px solid #333;
          box-sizing: border-box;
          position: relative;
          top: -6px;
          height: 100%;
        }
      }
      .answer-option-wrapper{
        margin-top: 10px;
        .answer{
          position: relative;
          height: 90px;
          line-height: 90px;
          background: #E9E9E9;
          color: #3D3E3B;
          box-sizing: border-box;
          padding: 0 40px;
          border-radius: 12px;
          border: 1px solid #E9E9E9;
          transition: all .3s ease-in-out;
          &:not(:first-child){
            margin-top: 10px;
          }
          &::after{
            content: '\F0C8';
            position: absolute;
            color: transparent;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-family: 'vant-icon';
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
          }
          &.selected{
            color: #2093E9;
            background: #C1E8FC;
            border-color: #458AB3;
            &::after{
              color: #fff;
            }
          }
        }
        .textarea{
          height: 176px;
          width: 100%;
          margin-top: 20px;
          border: 1px solid #B0B0B0;
          font-size: 32px;
          box-sizing: border-box;
          padding: 0 10px;
        }
      }
    }
  }

  /deep/.van-popup{
    width: 700px;
    box-sizing: border-box;
    padding: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .van-popup__close-icon{
      font-size: 30px;
    }
  }

  /deep/.van-popup.notice-popup{
    .notice-content-wrapper{
      font-size: 30px;
      .title{
        text-align: center;
        color: red;
      }
      .content{
        margin-top: 20px;
        line-height: 1.8;
        color: #355A73;
      }
    }
  }
  /deep/.van-popup.group-popup{
    .group-content-wrapper{
      display: flex;
      flex-wrap: wrap;
      font-size: 30px;
      >div{
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 50px;
        background: #D9D9D9;
        color: #5D5D5D;
        text-align: center;
        box-sizing: border-box;
        margin-bottom: 30px;
        &:not(:nth-child(5n+1)){
          margin-left: 30px;
        }
        &.finished{
          background: #009CFE;
          color: #fff;
        }
      }
    }
  }
}
</style>
